import RandomSpacePoints from "./mesh/RandomSpacePoints.js";
import RandomModelPoints from "./mesh/RandomModelPoints.js";
import particlesAnimate from "./mesh/ParticlesAnimate.js";
// 导入gltf加载器
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
// 导入draco解码器
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";

/**
 * 初始化Threejs
 */
import * as THREE from "three";

// 1.创建场景
const scene = new THREE.Scene();

// 2.创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

// 设置相机位置
camera.position.z = 3;

// 添加相机
scene.add(camera);

// 初始化渲染器
const renderer = new THREE.WebGLRenderer({
  antialias: true, // 开启抗锯齿
});

// 开启阴影效果
renderer.shadowMap.enabled = true;

//设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);

// 将webgl渲染的canvas内容添加到body上
document.body.appendChild(renderer.domElement);

// 监听画面的变化，更新渲染的画面
window.addEventListener("resize", () => {
  // 更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight;
  // 更新摄像机的投影矩阵
  camera.updateProjectionMatrix();
  // 更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio);
});

/**
 * 通过滚轮滚动来切换页面
 */
let currentPage = { value: 0 };
const totalPages = 20;
window.addEventListener("wheel", function (event) {
  if (event.deltaY > 0) {
    // 滚轮向下滚动
    if (currentPage.value < totalPages) {
      currentPage.value++;
    }
  } else {
    // 滚轮向上滚动
    if (currentPage.value > 0) {
      currentPage.value--;
    }
  }
  // 通过改变 translateY 的值来实现滚动效果
  document.querySelector(".container").style.transform = `translateY(-${
    currentPage.value * 10
  }vh)`;
});

const clock=new THREE.Clock();

// 创建一个平面
const planeGeometry = new THREE.PlaneGeometry(50,50);
const planeMaterial = new THREE.MeshBasicMaterial({
  color:0x00ff00,
  transparent:true,
  opacity:0.1
})
const plane = new THREE.Mesh(planeGeometry, planeMaterial);

// 创建射线
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
const currentMouse = new THREE.Vector2();

let params = [
  clock,
  currentMouse,
  mouse,
  raycaster,
  camera,
  scene,
  plane,
  currentPage
]

window.addEventListener('mousemove', onMouseMove);

function onMouseMove(event) {
  // 将鼠标的屏幕坐标转换为归一化设备坐标
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
}

// 创建粒子
let spacePoints = particlesAnimate(new RandomSpacePoints(250),...params);
scene.add(spacePoints);

// 实例化加载器gltf
const gltfLoader = new GLTFLoader();
// 实例化加载器draco,用来解压glb文件
const dracoLoader = new DRACOLoader();
/**
 * 设置draco路径,这里需要需要
 * 从node_modules\three\examples\jsm(js)\libs文件夹下面拷贝出来，
 * 然后放到public文件夹下面，
 * 这样才能正常解析
 * 新版本Three好像并不需要
 * 你加载不出来可以尝试这个方法
 */
dracoLoader.setDecoderPath("./draco/");
// 设置gltf加载器draco解码器
gltfLoader.setDRACOLoader(dracoLoader);
// 加载模型
gltfLoader.load(
  // 模型路径
  "./model/rocket.glb",
  // 加载完成回调
  (gltf) => {
    const model = gltf.scene;
    // scene.add(model);
    model.traverse((child) => {
      if (child.isMesh) {
        const points = particlesAnimate(new RandomModelPoints(child, 8000),...params);
        //  scene.add(points);
        if (points) {
          points.position.x = 1;
          scene.add(points);
        }
      }
    });
  }
);

gltfLoader.load(
  "./model/earth.glb",
  // 加载完成回调
  (gltf) => {
    const model = gltf.scene;
    // 提取模型的几何体信息
    model.traverse((child) => {
      if (child.isMesh) {
        const points = particlesAnimate(new RandomModelPoints(child, 8000),...params);
        if (points) {
          points.position.x = -1;
          points.position.y = -5;
          // models.push(points)
          scene.add(points);
        }
      }
    });
  }
);

gltfLoader.load(
  "./model/duck.glb",
  // 加载完成回调
  (gltf) => {
    const model = gltf.scene;
    // 提取模型的几何体信息
    model.traverse((child) => {
      if (child.isMesh) {
        const points = particlesAnimate(new RandomModelPoints(child, 8000),...params);
        if (points) {
          points.position.x = 1;
          points.position.y = -10;
          scene.add(points);
        }
      }
    });
  }
);



// 持续渲染，让相机场景动起来
function render() {
  // lerp(x,y,t) 对两个值 x 和 y 进行线性插值，t 是插值系数，范围在 [0, 1] 之间。
  let cameraY = THREE.MathUtils.lerp(
    camera.position.y,
    -currentPage.value * 0.5,
    0.05
  );
  camera.position.y = cameraY;
  camera.lookAt(0, cameraY, 0);
  spacePoints.position.y = cameraY;
  // 使用渲染器通过相机将场景渲染进来
  renderer.render(scene, camera);
  // 渲染下一帧的时候就会调用render函数
  requestAnimationFrame(render);
}

render();
